/**
 * 把图片转成canvas 图片 然后进行旋转 最后输出base64格式
 * @param src 图片路径 最好不要跨域
 * @param edg 必须是90的整数倍
 * @param callback 回调方法
 * @return
 */

 function rotateBase64Img(src, edg, callback) {

  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");// 创建一个2d的画布

  var imgW;//图片宽度
  var imgH;//图片高度
  var size;//canvas初始大小

  if (edg % 90 != 0) {
      console.error("旋转角度必须是90的倍数!");
      throw '旋转角度必须是90的倍数!';
  }
  (edg < 0) && (edg = (edg % 360) + 360)
  const quadrant = (edg / 90) % 4; //旋转象限
  const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标

  var image = new Image();
  // anonymous 是用来解决 图片的路径是跨域图片
  image.crossOrigin = "anonymous"
  image.src = src;

  image.onload = function () {

      imgW = image.width;
      imgH = image.height;
      size = imgW > imgH ? imgW : imgH;

      canvas.width = size * 2;
      canvas.height = size * 2;

      switch (quadrant) {
      case 0:
          cutCoor.sx = size;
          cutCoor.sy = size;
          cutCoor.ex = size + imgW;
          cutCoor.ey = size + imgH;
          break;
      case 1:
          cutCoor.sx = size - imgH;
          cutCoor.sy = size;
          cutCoor.ex = size;
          cutCoor.ey = size + imgW;
          break;
      case 2:
          cutCoor.sx = size - imgW;
          cutCoor.sy = size - imgH;
          cutCoor.ex = size;
          cutCoor.ey = size;
          break;
      case 3:
          cutCoor.sx = size;
          cutCoor.sy = size - imgW;
          cutCoor.ex = size + imgH;
          cutCoor.ey = size + imgW;
          break;
  }

      ctx.translate(size, size);
      ctx.rotate(edg * Math.PI / 180);
      // 下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：
      ctx.drawImage(image, 0, 0);
      // 作用： 用来获取canvas画布上指定矩形区域的像素数据；
      //参数: x:	矩形的左顶点横坐标 y:	矩形的左顶点纵坐标 width:	矩形的宽度 height:	矩形的高度
      // 返回值： 返回的是一个ImageData对象，该对象包含了三个只读属性：
      // ImageData.width	ImageData的宽度，用像素表示 ImageData.height	ImageData的高度，用像素表示  ImageData.data	类型为Uint8ClampedArray的一维数组，每四个数组元素代表了一个像素点的RGBA信息，每个元素数值介于0~255
      // 注意：getImageData按照从左到右，从上到下的顺序去存储像素点信息的

      var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
      if (quadrant % 2 == 0) {
          canvas.width = imgW;
          canvas.height = imgH;
      } else {
          canvas.width = imgH;
          canvas.height = imgW;
      }
      // 参数: imgData:	规定要放回画布的 ImageData 对象。 x:	ImageData 对象左上角的 x 坐标，以像素计。y:	ImageData 对象左上角的 y 坐标，以像素计。
      // dirtyX:	可选。水平值（x），以像素计，在画布上放置图像的位置。dirtyY:	可选。水平值（y），以像素计，在画布上放置图像的位置。
      // dirtyWidth:	可选。在画布上绘制图像所使用的宽度。 dirtyHeight:	可选。在画布上绘制图像所使用的高度。
      ctx.putImageData(imgData, 0, 0);
      callback(canvas.toDataURL())
  };
}